<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>文字图片垂直居中</title>
        <!-- <script>
            !function(t,e){var n=t.documentElement,i="orientationchange"in window?"orientationchange":"resize",o=function(){var t=n.clientWidth,e=750;t&&(t>=e?n.style.fontSize="100px":n.style.fontSize=100*(t/e)+"px")};o(),t.addEventListener&&(e.addEventListener(i,o,!1),t.addEventListener("DOMContentLoaded",o,!1))}(document,window);
        </script> -->
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            .box{
                background-color: #ccc;
                margin-bottom: 20px;
            }
            .pc-tags{
                display: inline-block;
                height: 200px;
                line-height: 200px;
            }
            .img{
                width: 200px;
                height: 200px;
                display: inline-block;
                background: url(http://00.imgmini.eastday.com/mobile/20180103/20180103215054_cce882f6e93a898343bbfe6721459765_6_mwpm_03200403.jpg) center center no-repeat;
            }
            .img1{
                vertical-align: middle;
            }
            .vm{
                vertical-align: middle;
            }
            .tags {
                margin-top: 2px;
                color: #aaa;
                overflow: hidden;
                font-size: 0;
            }
            .clearfix:before, .clearfix:after {
                content: "";
                display: table;
            }
            .tags .tag {
                display: inline-block;
                vertical-align: middle;
                font-size: 11px;
                /* line-height: 20px; */
                line-height: .58rem;
                margin-right: 8px;
            }
            .btn-share {
                height: .58rem;
                line-height: .58rem;
                font-size: 12px;
                /* vertical-align: middle; */
                margin-right: 5px;
            }
            .icon-share {
                display: inline-block;
                width: 20px;
                height: 20px;
                margin-right: 2px;
                vertical-align: middle;
                background: url(http://172.18.15.221:3002/src/img/applist/share@2x.png) center center no-repeat;
                background-size: contain;
            }
            .btn-share span {
                vertical-align: middle;
                display: inline-block;
            }
            .fr {
                float: right;
            }
            em, i {
                font-style: normal;
            }
        </style>
    </head>
    <body>
        <!-- <p class="tags clearfix"> 
            <em class="tag tag-src">心灵感悟</em> 
            <em class="tag tag-view">14万阅读</em>
            <span class="fr btn-share "> 
                <i class="icon-share"></i>
                <span>分享</span>
            </span>
        </p> -->
        <div class="box clearfix">
            <em class="pc-tags">心灵感悟</em> 
            <div class="right-box fr">
                <div class="img"></div>
                <span class="vm">文字设置垂直居中垂直居中</span>
            </div>
        </div>
        <div class="box clearfix">
            <em class="pc-tags">心灵感悟</em> 
            <div class="right-box fr">
                <div class="img img1"></div>
                <span>图片设置垂直居中</span>
            </div>
        </div>
        <div class="box clearfix">
            <em class="pc-tags">心灵感悟</em> 
            <div class="right-box fr">
                <div class="img img1"></div>
                <span class="vm">图片文字都设置垂直居中</span>
            </div>
        </div>
    </body>
</html>